<template>
  <!-- <div style="background-color:#100c2a;"> -->
  <div>
    <el-card class="box-card" style="margin-bottom: 15px">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="速度">
          <el-input v-model="formInline.user" placeholder="迈数"></el-input>
        </el-form-item>
        <el-form-item label="活动区域">
          <el-select v-model="formInline.region" placeholder="活动区域">
            <el-option label="杭州" value="shanghai"></el-option>
            <el-option label="九江" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">确定</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card
      class="box-card"
      style="background-color: #efefef; margin-bottom: 15px"
    >
      <!-- <div v-for="o in 4" :key="o" class="text item">
        {{ "列表内容 " + o }}
      </div> -->
      <div
        id="main"
        style="width: 40%; height: 500px; display: inline-block"
      ></div>
      <div
        style="margin-left: 50px;width: 1px; height: 500px; display: inline-block;background:#666666"
      ></div>
      <div
        id="mainbiao"
        style="
          width: 40%;
          height: 500px;
          display: inline-block;
          margin-left: 50px;
        "
      ></div>
    </el-card>

    <el-card class="box-card" style="background-color: #efefef">
      <div id="MyMap" style="width: 100%; height: 400px"></div>
    </el-card>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      formInline: {
        user: 0,
        region: "",
      },
    };
  },
  created() {},
  mounted() {
    this.initChart();
    this.initChartbiao();
    this.inMapChart();
  },
  methods: {
    onSubmit() {
      console.log("submit!");
      console.log(this.formInline.user);
      this.inMapChart();
    },
    initChartbiao() {
      let chartDom = document.getElementById("mainbiao");
      let myChart = this.$echarts.init(chartDom);
      let option;

      option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          top: "30%",
          right: "0",
          orient: "vertical",
          itemGap: 50,
        },
        grid: {
          left: "3%",
          right: "15%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: ["华为", "Apple", "小米", "三星", "oppo", "vivo", "荣耀"],
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "京东",
            type: "bar",
            barWidth: 15,
            stack: "Search Engine",
            emphasis: {
              focus: "series",
            },
            data: [620, 732, 701, 734, 1090, 1130, 1120],
          },
          {
            name: "淘宝",
            type: "bar",
            stack: "Search Engine",
            emphasis: {
              focus: "series",
            },
            data: [120, 132, 101, 134, 290, 230, 220],
          },
          {
            name: "到店",
            type: "bar",
            stack: "Search Engine",
            emphasis: {
              focus: "series",
            },
            data: [60, 72, 71, 74, 190, 130, 110],
          },
          {
            name: "其他",
            type: "bar",
            stack: "Search Engine",
            emphasis: {
              focus: "series",
            },
            data: [62, 82, 91, 84, 109, 110, 120],
          },
        ],
      };

      option && myChart.setOption(option);
    },
    initChart() {
      let chartDom = document.getElementById("main");
      let myChart = this.$echarts.init(chartDom);
      let option;

      option = {
        legend: {
          top: "bottom",
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: {
              show: true,
              readOnly: false,
              iconStyle: { borderWidth: "1", borderCap: "butt" },
            },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        series: [
          {
            name: "2021年QS药剂与药理学学科中国内地高校排名前八",
            colorBy: "data",
            type: "pie",
            radius: [20, "70%"],
            center: ["50%", "50%"],
            roseType: "area",
            emphasis: {
              focus: "series",
              blurScope: "coordinateSystem",
            },
            itemStyle: {
              borderRadius: 8,
            },
            data: [
              { value: 40, name: "中国药科大学" },
              { value: 38, name: "清华大学" },
              { value: 32, name: "上海交通大学" },
              { value: 30, name: "中山大学" },
              { value: 28, name: "南京大学" },
              { value: 26, name: "四川大学" },
              { value: 22, name: "西安交通大学" },
              { value: 18, name: "华中科技大学" },
            ],
          },
        ],
      };

      option && myChart.setOption(option);
    },
    inMapChart() {
      let chartDom = document.getElementById("MyMap");
      let myChart = this.$echarts.init(chartDom);
      let option;

      option = {
        tooltip: {
          formatter: "{a} <br/>{b} : {c}%",
        },
        series: [
          {
            name: "Pressure",
            type: "gauge",
            max: 240,
            progress: {
              show: true,
            },
            detail: {
              valueAnimation: true,
              formatter: "{value}",
            },
            data: [
              {
                value: this.formInline.user,
                name: "时速",
              },
            ],
          },
        ],
      };

      option && myChart.setOption(option);
    },
  },
};
</script>
<style scoped>
::v-deep .el-form--inline .el-form-item__label {
  color: red;
}
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  width: 100%;
  color: rgb(252, 248, 248);
  /* background-color: rgba(64, 158, 255, 0.1); */
}
</style>
